<template>
  <div class="border08">
    <svg :width="w" :height="h">
      <defs>
        <path :id="path" :d="pathD" fill="transparent" />
        <radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#fff" stop-opacity="1" />
          <stop offset="100%" stop-color="#fff" stop-opacity="0" />
        </radialGradient>
        <mask :id="mask">
          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
            <animateMotion
                :dur="`${dur}s`"
                :path="pathD"
                rotate="auto"
                repeatCount="indefinite"
            />
          </circle>
        </mask>
      </defs>
      <polygon
          :fill="backgroundColor"
          :points="`5, 5 ${w - 5}, 5 ${w - 5} ${h - 5} 5, ${h - 5}`"
      />
      <use :stroke="colors[0]" stroke-width="1" :xlink:href="`#${path}`" />
      <use
          :stroke="colors[1]"
          stroke-width="3"
          :xlink:href="`#${path}`"
          :mask="`url(#${mask})`"
      >
        <animate
            attributeName="stroke-dasharray"
            :from="`0, ${length}`"
            :to="`${length}, 0`"
            :dur="`${dur}s`"
            repeatCount="indefinite"
        />
      </use>
    </svg>
  </div>
</template>
<script>
import {v1} from "uuid";

export default {
  name: 'border08',
  cnName: '边框-08',
  props: {
    width: Number,
    height: Number,
    option: Object
  },
  data() {
    return {
      path: `border-box-08-path-${v1()}`,
      gradient: `border-box-08-gradient-${v1()}`,
      mask: `border-box-08-mask-${v1()}`
    }
  },
  methods: {},
  computed: {
    w() {
      return this.width
    },
    h() {
      return this.height
    },
    colors() {
      return this.option.attribute.colors
    },
    backgroundColor() {
      return this.option.attribute.bgColor
    },
    dur() {
      return this.option.attribute.dur
    },
    reverse() {
      return this.option.attribute.reverse
    },
    length() {
      return (this.w + this.h - 5) * 2
    },
    pathD() {
      if(this.reverse) {
        return `M 2.5, 2.5 L 2.5, ${this.h - 2.5} L ${this.w - 2.5}, ${
            this.h - 2.5
        } L ${this.w - 2.5}, 2.5 L 2.5, 2.5`
      }
      return `M2.5, 2.5 L${this.w - 2.5}, 2.5 L${this.w - 2.5}, ${
          this.h - 2.5
      } L2.5, ${this.h - 2.5} L2.5, 2.5`
    }
  }
}
</script>

<style lang="less" scoped>
.border08 {

}
</style>
